<template>
  <div class="h-full">
    <vxe-grid v-bind="gridOptions1" ref="dataTableRef">
      <template #toolbar_buttons>
        <a-button type="primary" @click="onAdd">新增</a-button>&nbsp;
        <a-button type="danger" @click="onDel">删除</a-button>&nbsp;
        <vxe-button @click="gridOptions1.align = 'left'">居左</vxe-button>
        <vxe-button @click="gridOptions1.align = 'center'">居中</vxe-button>
        <vxe-button @click="gridOptions1.align = 'right'">居右</vxe-button>
      </template>
      <template #operate="{ row }">
        <div>
          <a-button @click="() => onEdit(row)">编辑</a-button>&nbsp;
          <a-button type="danger">删除</a-button>
        </div>
      </template>
    </vxe-grid>
    <Add v-model="visible" :title="title" :initData="editData"></Add>
  </div>
</template>

<script>
import Add from "./Add.vue";
export default {
  components: {
    Add,
  },
  data() {
    return {
      title: "新增",
      visible: false,
      editData: null,
      checkedRows: [],
      gridOptions1: {
        border: true,
        resizable: true,
        showOverflow: true,
        stripe: true,
        // height: auto的作用是让表格填充剩余所有高度
        height: "auto",
        align: "left",
        toolbarConfig: {
          slots: {
            // 自定义工具栏模板
            buttons: "toolbar_buttons",
          },
        },
        columns: [
          { type: "checkbox", width: 50 },
          { type: "seq", width: 50 },
          { field: "name", title: "Name", width: 200 },
          { field: "school", title: "学校", width: 200 },
          { field: "sex", title: "Sex", width: 200, showHeaderOverflow: true },
          {
            field: "address",
            title: "Address",
            width: 200,
            showOverflow: true,
          },
          { field: "age", title: "年龄", width: 200, showOverflow: true },
          {
            title: "操作",
            slots: { default: "operate" },
            width: 200,
            fixed: "right",
          },
        ],
        data: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: 1,
            age: 0,
            address:
              "Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: 2,
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: 1,
            age: 100,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: 2,
            age: 70,
            address: "Shenzhen",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: 2,
            age: 10,
            address: "Shanghai",
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Designer",
            sex: 2,
            age: 90,
            address: "Shenzhen",
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T7",
            role: "Test",
            sex: 1,
            age: 5,
            address: "Shenzhen",
          },
          {
            id: 10008,
            name: "Test8",
            nickname: "T8",
            role: "Develop",
            sex: 1,
            age: 80,
            address: "Shenzhen",
          },
        ],
      },
    };
  },
  methods: {
    onEdit(row) {
      this.editData = {
        parentRes: "0-0-1",
        type: "menu",
        key: "abc",
        name: "name",
        path: "path",
        showOut: true,
        showIn: false,
      };
      this.title = "编辑";
      this.visible = true;
      console.log(row);
    },
    onDel() {
      this.checkedRows = this.$refs.dataTableRef.getCheckboxRecords();
      if (!this.checkedRows || this.checkedRows.length === 0) {
        this.$message.warning("请选择待删除数据");
      } else {
        // 请求后端删除接口，再重新刷新
        this.checkedRows = [];
        this.$refs.dataTableRef.clearCheckboxRow()
      }
    },
    onAdd() {
      this.editData = null;
      this.visible = true;
      this.title = "新增";
    },
  },
};
</script>

<style scoped>
/* 滚动条整体部分 */
/* .mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
} */

/*滚动条的轨道*/
/* .mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #ffffff;
} */

/*滚动条里面的小方块，能向上向下移动*/
/* .mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 5px;
  border: 1px solid #f1f1f1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: #787878;
} */

/*边角，即两个滚动条的交汇处*/
/* .mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #ffffff;
} */
</style>
